<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>蛇尾李氏族谱</title>
	<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
	<link rel="stylesheet" href="./dist/themes/default/style.min.css" />
	<link rel="stylesheet" href="./zupu.css?v=4" />
	<link  rel="stylesheet" href="./dist/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
	<script src="./dist/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
	<script>
		// 强制禁止用户修改微信客户端的字体大小
       (function() {

           if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
               handleFontSize();
           } else {
               if (document.addEventListener) {
                   document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
               } else if (document.attachEvent) {
                   document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                   document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
           }
           function handleFontSize() {
               // 设置网页字体为默认大小
               WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               // 重写设置网页字体大小的事件
               WeixinJSBridge.on('menu:setfont', function() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
		})();
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?379d0f06db82c1fb8ca284f18cf8cffe";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
</head>
<body>
	<nav class="navbar fixed-top navbar-expand navbar-dark bg-primary">
		<div class="container-fluid">
		<img src="./li.png" alt="" width="30" height="30" class="d-inline-block align-text-top">
		<!-- <a class="navbar-brand" href="#">蛇尾李氏族谱</a> -->
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
		  <div class="row">
			  <div class="col-12">
				<div class="list-group list-group-horizontal" id="page-tab" role="toolbar">
				  <a class="list-group-item list-group-item-action text-nowrap active btn btn-warning" id="page1" data-bs-toggle="list" href="#" role="tab">网页版</a>
				  <a class="list-group-item list-group-item-action text-nowrap btn btn-warning"  id="page2" data-bs-toggle="list" href="#" role="tab">书籍版</a>
				</div>
			  </div>
			</div>
		  <form class="d-flex input-group" role="search" onsubmit="return false;">
			<input class="form-control ms-4" id="searchInput" type="search" placeholder="第一步：输入名字查找（不用姓氏）" aria-label="名字">
			<button class="btn btn-success" id="searchButton" type="submit" onclick="searchButtonClick()">查找</button>
		  </form>
		</div>
		</div>
	</nav>
	<div class="position-fixed top-25 start-50 translate-middle-x p-3" style="z-index: 5">
		<div id="searchToast" class="toast align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
		  <div class="d-flex">
			<div class="toast-body">
				未查找到结果。
			</div>
			<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
		  </div>
		</div>
	</div>
	<div class="container-fluid" style="margin-top:4.3em;">
		<!-- <hr class="border border-primary border-2 opacity-75"> -->

		<div id="content" class="row" style="margin-left: 10px;">
			<div class="row">
			  <div class="col-12">
				<div class="list-group list-group-horizontal" id="list-tab" role="tablist">
				  <a class="list-group-item list-group-item-action text-nowrap" id="list1" data-bs-toggle="list" href="#" role="tab">1.滕王庆源世德总图</a>
				  <a class="list-group-item list-group-item-action text-nowrap" id="list2" data-bs-toggle="list" href="#" role="tab">2.元婴南昌世系</a>
				  <a class="list-group-item list-group-item-action text-nowrap active" id="list3" data-bs-toggle="list" href="#" role="tab">3.蛇尾李氏世系</a>
				</div>
			  </div>
			  
			</div>
			<div class="row ">
				<div id="ajaxParent" class="col-lg-9 col-md-12 card" style="overflow:scroll;height:500px;">
					<div id="ajax1" style="display: none;"></div>
					<div id="ajax2" style="display: none;"></div>
					<div id="ajax3" style="display: none;"></div>
				</div>
				<button id="moveButton" type="button" class="btn btn-primary btn-sm d-lg-none">这里可以上下拖动</button>
				<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show d-lg-none" role="alert">
				  <div>提示：双击名字（展开/收起）</div>
				  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
				</div>
				<div class="col-lg-3 col-md-12">
					<div class="card">
					  <div class="card-header">
						简介
					  </div>
					  <div id="description" class="card-body"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="pdfContent" class="row">
			<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
			  <div>提示：“书籍版”在电脑查看效果更好</div>
			  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
			<iframe class="embed-responsive-item" id="myIframe" src="./dist/pdf/web/viewer.html?file=../../../zupuMerge_A4.pdf" width="100%" scrolling="no" frameborder="10" 
			 style="padding: 0;height: calc(100% - 9.3em);position: fixed;">
				<p>抱歉，您的浏览器不支持PDF预览，请点击链接<a href="./zupuMerge_A4.pdf">下载PDF文件</a></p>
			</iframe>
		</div>
	</div>
	<footer class="border-top footer text-muted text-center mb-3">
        <div class="container">
            &copy; 2023 - Joysing.cc<br>
			广东省化州市东山街道塘尾村，最新记录到1995年，如有错误，请联系忠声
        </div>
    </footer>
	<script src="./dist/libs/jquery-3.6.4.min.js"></script>
	<script src="./dist/jstree.js"></script>
	
	<script>
	////拖动按钮改变DIV大小
	$(function () {
		var target = document.querySelector('#ajaxParent');

		//初始化参数
		var els = target.style,
		//鼠标的 X 和 Y 轴坐标
		x = y = 0;
		//绑定需要拖拽改变大小的元素对象 -----pc端---
		bindResize(document.getElementById("moveButton"),target);

		//  移动端拖拽 -------------------
		// 手指按下
		document.getElementById("moveButton").addEventListener('touchstart', function (e) {
			x = e.targetTouches[0].pageX - target.offsetWidth,
			y = e.targetTouches[0].pageY - target.offsetHeight;
			e.preventDefault()
		});
		document.getElementById("moveButton").addEventListener('touchmove', function (e) {
			//左右拖动改变宽度
			//els.width = e.targetTouches[0].pageX - x + 'px'
			//上下拖动改变高度
			els.height = e.targetTouches[0].pageY - y + 'px'
		});
    });

    function bindResize(moveButton,el) {
		var els = el.style,
        //鼠标的 X 和 Y 轴坐标
        x = y = 0;
		//鼠标按下事件
		$(moveButton).mousedown(function (e) {
			//按下元素后，计算当前鼠标与对象计算后的坐标
			x = e.clientX - el.offsetWidth,
			y = e.clientY - el.offsetHeight;
			//在支持 setCapture 做些东东
			el.setCapture ? (
				//捕捉焦点
				el.setCapture(),
				//设置事件
				el.onmousemove = function (ev) {
					mouseMove(ev || event)
				},
				el.onmouseup = mouseUp
			) : (
				//绑定事件
				$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
			)
			//防止默认事件发生
			e.preventDefault()
		});

		//移动事件
		function mouseMove(e) {
			//左右拖动改变宽度
			//els.width = e.clientX - x + 'px'
			//上下拖动改变高度
			els.height = e.clientY - y + 'px'
		}

		//停止事件
		function mouseUp() {
			//在支持 releaseCapture 做些东东
			el.releaseCapture ? (
				//释放焦点
				el.releaseCapture(),
				//移除事件
				el.onmousemove = el.onmouseup = null
			) : (
				//卸载事件
				$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
			)
		}
    }
	////拖动按钮改变DIV大小



	var filePath="3.json";
	loadTree("#ajax1","1.json");
	loadTree("#ajax2","2.json");
	loadTree("#ajax3","3.json");
	document.getElementById("ajax3").style.display = 'block';
	function loadTree(treeDivID,jsonFilePath){
		$(treeDivID).on("select_node.jstree", function (e, data) {
			nodeId=data.node.id;
			$.getJSON(jsonFilePath, function(data) {
				
				//data 代表读取到的json中的数据
				$.each(data, function(infoIndex, info) {
					if(nodeId==info["id"])
						$("#description").html(info["description"]);
				});
			});
		})
		.on('search.jstree', function (event,data) {
			if (data.res.length>0) {
				$(treeDivID).jstree(true).select_node(data.res[0]);
				//滚动
				$('#ajaxParent').animate({scrollTop: 0,scrollLeft: 0}, 100);
				$('#ajaxParent').animate({
					scrollTop: $('#'+data.res[0]).offset().top-$('#ajaxParent')[0].offsetHeight/2,
					scrollLeft: $('#'+data.res[0]).offset().left}, 100);
			}else{
				//显示提示toast
				var searchToast = new bootstrap.Toast(document.getElementById('searchToast'))
				searchToast.show()
			}
		})
		.jstree({
			'core' : {
				'data' : {
					"url" : jsonFilePath,
					"dataType" : "json" // needed only if you do not supply JSON headers
				},
				"themes" : {
					"variant" : "large",//加大
					"ellipsis" : true //文字多时省略
				}
			}
			,
			"types" : {
				"#" : {
					"max_children" : -1,
					"max_depth" : 2,
					"icon" : "personicon",//自定义css类personicon
					"valid_children" : ["root"]
				},
				"man" : {
					"icon" : "personicon",
					"valid_children" : []
				}
			},
			
			"plugins" : ["search", "state", "types", "wholerow", "themes","sort"]
		});
	}
	//查找功能
	function searchButtonClick(){  
		var searchInput=$('#searchInput').val();
		if(document.getElementById("ajax1").style.display == 'block')
			$("#ajax1").jstree(true).search(searchInput);
		else if(document.getElementById("ajax2").style.display == 'block')
			$("#ajax2").jstree(true).search(searchInput);
		else if(document.getElementById("ajax3").style.display == 'block')
			$("#ajax3").jstree(true).search(searchInput);
	} 
	
	const triggerTabList = document.querySelectorAll('#list-tab a')
	triggerTabList.forEach(triggerEl => {
	  const tabTrigger = new bootstrap.Tab(triggerEl)
	  triggerEl.addEventListener('click', event => {
		if(event.srcElement.id=="list1"){
			document.getElementById("ajax1").style.display = 'block';
			document.getElementById("ajax2").style.display = 'none';
			document.getElementById("ajax3").style.display = 'none';
		}else if(event.srcElement.id=="list2"){
			document.getElementById("ajax1").style.display = 'none';
			document.getElementById("ajax2").style.display = 'block';
			document.getElementById("ajax3").style.display = 'none';
		}else if(event.srcElement.id=="list3"){
			document.getElementById("ajax1").style.display = 'none';
			document.getElementById("ajax2").style.display = 'none';
			document.getElementById("ajax3").style.display = 'block';
		}
		
	  })
	})
	
	document.getElementById("content").style.display = 'block';
	document.getElementById("pdfContent").style.display = 'none';
	document.querySelectorAll('#page-tab a').forEach(triggerEl => {
	  const tabTrigger = new bootstrap.Tab(triggerEl)
	  triggerEl.addEventListener('click', event => {
		if(event.srcElement.id=="page1"){
			document.getElementById("content").style.display = 'block';
			document.getElementById("pdfContent").style.display = 'none';
			document.getElementById("searchInput").setAttribute("placeholder","名字");
			document.getElementById("searchInput").disabled=""
			document.getElementById("searchButton").disabled=""
		}else if(event.srcElement.id=="page2"){
			document.getElementById("content").style.display = 'none';
			document.getElementById("pdfContent").style.display = 'block';
			document.getElementById("searchInput").setAttribute("placeholder","用下面放大镜查找");
			document.getElementById("searchInput").disabled="disabled"
			document.getElementById("searchButton").disabled="disabled"
		}
		
	  })
	})


	</script>
</body>
</html>
